<template>
    <div class="container">
        <ul>
            <li v-for="(item,index) in listArr" :key="index"
                :style="{ zIndex: item.zIndex,backgroundColor: item.color,height: 300 - item.zIndex * 20 + 'px',lineHeight:300 - item.zIndex * 20 + 'px'}"
                class="list-style animated"
                ref="listSlide"
                @touchstart="touchstart"
                @touchend="touchend(index,item.id,$event)"
            >
                {{item.text}}
            </li>
        </ul>
    </div>
</template>

<script>
  // animated  fadeOutLeft
  import {debounce} from "../assets/debounce";

  export default {
    name: "index",
    data() {
      return {
        startx:'',
        starty:'',
        listArr: [
          {
            color: 'red',
            text: '卡片3',
            zIndex: 1,
            id: 1,
          },
          {
            color: 'green',
            text: '卡片2',
            zIndex: 2,
            id: 2,
          },
          {
            color: 'orange',
            text: '卡片1',
            zIndex: 3,
            id: 3,
          },
        ]
      };
    },
    methods: {
      // 获得角度
      getAngle(angx, angy) {
        return Math.atan2(angy, angx) * 180 / Math.PI;
      },
      //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
      getDirection(startx, starty, endx, endy) {
        var angx = endx - startx;
        var angy = endy - starty;
        var result = 0;
        //如果滑动距离太短
        if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
          return result;
        }

        var angle = this.getAngle(angx, angy);
        if (angle >= -135 && angle <= -45) {
          result = 1;
        } else if (angle > 45 && angle < 135) {
          result = 2;
        } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
          result = 3;
        } else if (angle >= -45 && angle <= 45) {
          result = 4;
        }

        return result;
      },
      touchstart(e) {
        this.startx = e.touches[0].pageX;
        this.starty = e.touches[0].pageY;
      },
      touchend(index,itemId,e) {
        var endx, endy;
        endx = e.changedTouches[0].pageX;
        endy = e.changedTouches[0].pageY;
        var direction = this.getDirection(this.startx, this.starty, endx, endy);
        switch (direction) {
          case 0:
            alert("未滑动！");
            break;
          case 1:
            alert("向上！")
            break;
          case 2:
            alert("向下！")
            break;
          case 3:
            // alert("向左！")
            this.leftSlide(index,itemId,'fadeOutLeft')
            ;
            break;
          case 4:
            // alert("向右！")
            this.leftSlide(index,itemId,'fadeOutRight')

            break;
          default:
        }
      },
      // 数组对象排序
      compare(prop) {
        return function (obj1, obj2) {
          var val1 = obj1[prop];
          var val2 = obj2[prop];if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
      },
      leftSlide:debounce(function (index,itemId,direction) {
        // console.log(this.$refs.listSlide);
        this.$refs.listSlide[index].classList.add(direction);
        setTimeout(() => {
          this.$refs.listSlide[index].classList.remove(direction);
          this.listArr.forEach(v => {
            if (v.id === itemId) {
              this.$set(this.listArr[this.listArr.length - 1],'zIndex',1);
              this.$set(this.listArr[this.listArr.length - 2],'zIndex',3);
              this.$set(this.listArr[this.listArr.length - 3],'zIndex',2);
              this.listArr.sort(this.compare('zIndex'))
            }
          })
        },500)
      },500),
    }
  }
</script>

<style scoped lang="scss">
    *{
        padding: 0;
        margin: 0;
    }
    .container{
        width: 100vw;
    }
ul{
    width: 100%;
    list-style: none;
    li{
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        border-radius: 5px;
        font-size: 20px;
        color: #000;
        text-align: center;
    }
}
</style>
